<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
	<head>
		<meta charset="utf-8">
		<title>杰利联合</title>
		<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
		<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
		<meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">
		<meta content="no-cache,must-revalidate" http-equiv="Cache-Control">
		<meta content="no-cache" http-equiv="pragma">
		<meta content="0" http-equiv="expires">
		<meta content="telephone=no, address=no" name="format-detection">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
		  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
		<link rel="stylesheet" type="text/css" href="${ctxStatic}/jiu/css/mobile_module.css?v=1492676217" media="all">
		<link href="${ctxStatic}/jiu/css/common.css?v=1492676217" rel="stylesheet" type="text/css">
		<link rel="stylesheet" href="${ctxStatic}/jiu/css/ui-choose.css"/>
			<link rel="stylesheet" href="${ctxStatic}/jiu/css/pingjia.css"/>
		<style>
			.hearder{
				height: 50px;
				background-color: #30B0F3;
				width: 100%;
				text-align: center;
				color: white;
				font-size: 20px;
                line-height:50px;
                position: fixed;
			    top: 0;
			    z-index: 1;
			}
			.shang {
				display: flex;
				display: -webkit-flex;
				justify-content: flex-start;
				align-items: center;
				margin-top: 60px;
				margin-left: 5px;
				margin-right: 5px;
				border: 2px #E2E2E2 dotted;
				padding: 10px;
			}
			
			.name {
				font-size: 16px;
			}
			
			.ping1 {
				font-size: 16px;
				padding: 5px;
				margin-top: 15px;
				color: #666666;
				margin-left: 5px;
			}
			
			.clearfix::after {
				display: block;
				content: '';
				height: 0;
				overflow: hidden;
				clear: both;
			}
		/*星星样式*/
			.block {
				/* width: 100%; */
				margin: 0;
				/* padding-top: 10px; */
				line-height: 29px;
				margin-right: 10px;
				padding: 5px 0px;
				border-radius: 3px;
			}
			
			.block .star_score {
				float: left;
			}
			
			.star_list {
				height: 21px;
				margin: 50px;
				line-height: 21px;
			}
			
			.block p,
			.block .attitude {
				padding-left: 20px;
				line-height: 35px;
				height: 21px;
			}
			
			.block p span {
				color: #C00;
				font-size: 16px;
				font-family: Georgia, "Times New Roman", Times, serif;
			}
			
			.star_score {
				width: 175px;
				height: 21px;
				position: relative;
			}
			
			.star_score a {
				height: 21px;
				display: block;
				text-indent: -999em;
				position: absolute;
				left: 0;
			}
				/*星星一*/
			
			#startone .star_score {
				background: url(${ctxStatic}/jiu/ratingimg/s2.png);
			}
			
			#startone .star_score a:hover {
				background: url(${ctxStatic}/jiu/ratingimg/s1.png);
				left: 0;
			}
			
			#startone .star_score a.clibg {
				background: url(${ctxStatic}/jiu/ratingimg/s1.png);
				left: 0;
			}
			/*星星二*/
			
			#starttwo .star_score {
				background: url(${ctxStatic}/jiu/ratingimg/s2.png);
			}
			
			#starttwo .star_score a:hover {
				background: url(${ctxStatic}/jiu/ratingimg/s1.png);
				left: 0;
			}
			
			#starttwo .star_score a.clibg {
				background: url(${ctxStatic}/jiu/ratingimg/s1.png);
				left: 0;
			}
			/*星星三*/
			
			#starttree .star_score {
				background: url(${ctxStatic}/jiu/ratingimg/s2.png);
			}
			
			#starttree .star_score a:hover {
				background: url(${ctxStatic}/jiu/ratingimg/s1.png);
				left: 0;
			}
			
			#starttree .star_score a.clibg {
				background: url(${ctxStatic}/jiu/ratingimg/s1.png);
				left: 0;
			}
			/*星星样式*/
		</style>
	</head>
	<body style="background-color: white;">
	<header  class="hearder" style="">
			<a href="javascript:window.history.go(-1)">
				<img src="${ctxStatic}/jiu/img/fanhui.png" style="height: 20px;color: white;top:15px;position: absolute;left: 10px;"/>
			</a>
		                服务评价
	</header>
			<div class="modal fade" style="margin-top: 30%;" id="myModal"
			tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header" style="width:100%;position:relative">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close" style="position:absolute;right:10px;text-align:right">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="myModalLabel">操作提示</h4>
					</div>
					<div class="modal-body"></div>
					<div class="modal-footer" style="display:flex;justify-content:space-between;" >
						<button type="button" class="btn btn-success" data-dismiss="modal"
							id="yes" style="width:100px">确定</button>
						<button style="width:100px;background:red;" type="button" class="btn btn-danger" data-dismiss="modal"
							id="no">取消</button>
					</div>
				</div>
			</div>
		</div>
	<%-- 	<div class="shang">
			<div style="">
				<img src="${store.headimgurl}" style="width:60px;height:60px;border-radius: 50px;">
			</div>
			<div style="margin-left: 10px;line-height: 25px;">
				<p class="name">${store.name}</p>				
			</div>
		</div>
		 --%>
		<%-- <div>
			<p class="ping1">请您对${store.name}进行评价</p>
			<div id="starttwo" class="block clearfix">
			    <div class="star_score"></div>
				<p style="float:left;"></p>
				<div class="attitude"></div>
			</div>
		</div> --%>
		
			<div class="shang"  style="position: relative;">
			<div style="height: 90px;width: 120px;">
				<img src="${store.headimgurl}" style="width: 100%;height:90px;border-radius: 3px;">
			</div>
			<div style="margin-left: 10px;line-height: 25px;">
				<p class="name">${jiuOrder.storeName}</p>
				<p class="property" style="font-size: 15px;margin-top: 15px;">
					<span class="colorless">价格</span>
					<span class="orange">${jiuOrder.totalPrice}积分</span>
				</p>
				<p class="property" style="">
					<span class="colorless">数量</span>
					<span>${jiuOrder.orderNum}</span>
				</p>
				
			</div>
		
			<div style="position: absolute;right: 10px;top: 5px;">
				<p style="text-align: right;">
					<img src="${ctxStatic }/jiu/ratingimg/${storejermsg.creditRating.ratingpic }" style="height: 15px;"/>
				</p>
			</div>
			
			<div class="zhibiao" style="bottom: 10px;font-size: 12px;line-height: 20px;text-align: right;">
				<p>消费次数&nbsp;${storejermsg.salesnum }</p>
				<p>综合评价<span style="color: #ff9000;font-size: 14px;">&nbsp;${storejermsg.allscore }</span></p>
			</div>
		</div>
	
			<div style="border-bottom: 1px solid #eeeeee;padding-bottom: 20px;">
			<p class="ping1">请你对${store.name}门店进行评价</p>
			<div id="startone" class="block clearfix " >			
					<p style="float:left;line-height: 21px;padding:0px 10px;">支付速度</p>
					<div class="star_score"></div>					
					<div class="attitude" style="line-height: 21px;"></div>				
			</div>
			<div id="starttwo" class="block clearfix " >
				    <p style="float:left;line-height: 21px;padding:0px 10px;">收货速度</p>
					<div class="star_score"></div>					
					<div class="attitude" style="line-height: 21px;"></div>	
			</div>
			<div id="starttree" class="block clearfix " >
				    <p style="float:left;line-height: 21px;padding:0px 10px;">公&nbsp;&nbsp;正&nbsp;&nbsp;度</p>
					<div class="star_score"></div>					
					<div class="attitude" style="line-height: 21px;"></div>	
			</div>
		</div>
		
		<div>
			<!-- <div>
				<input type="text" id="word" name="word" maxlength="255" placeholder="请输入评价内容"/>
			</div> -->
			<div style="height: 30px;">
			<textarea placeholder="输入评论内容最少6个字" type="text" id="word" name="word" maxlength="255"  minlength="6" style="border-right-style: none;border-left-style: none;border-top-style: none;border-bottom: 1px solid #eee;"></textarea>
			</div>
		</div>
	
		
		<div style="margin: 0 15px;position: fixed;bottom: 20px;right: 10px;left: 10px;z-index: 999999;background-color: #fff;">
			<button class="pingjia_btn" onclick="submit()">提交</button>
		</div>
		
		<script type="text/javascript" src="${ctxStatic}/jiu/js/jquery-2.0.3.min.js"></script>
		<script src="${ctxStatic}/jiu/js/ui-choose.js"></script>	
			<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
       <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<script>
			// 将所有.ui-choose实例化
			$('.ui-choose').ui_choose();
			// uc_03 ul 多选
			var uc_03 = $('#uc_03').data('ui-choose');
			uc_03.click = function(index, item) {
			};
			uc_03.change = function(index, item) {				
			};
		</script>
		<script type="text/javascript" src="${ctxStatic}/jiu/js/startScore.js"></script>
		<script>		
		scoreFun($("#startone"), {
			fen_d: 22.1, //每一个a的宽度
			ScoreGrade: 5, //a的个数 10或者
			nameScore: "startone",
		});
		 scoreFun($("#starttwo"), {
			fen_d: 22.1, //每一个a的宽度
			ScoreGrade: 5, //a的个数 10或者
			nameScore: "starttwo",
		});
		 
		scoreFun($("#starttree"), {
			fen_d: 22.1, //每一个a的宽度
			ScoreGrade: 5, //a的个数 10或者
			nameScore: "starttree",
		});
			
			 var starNum=0;
			 var starNumTwo=0;
			 var starNumThd=0;
			 function start(n,name){			
				
				
				 var id=$(name).attr("id");
				
				 
				 if("startone"==id){
					 starNum=n; 
				 }
				 if("starttwo"==id){
					 starNumTwo=n; 
				 }
				 if("starttree"==id){
					 starNumThd=n; 
				 }
			 } 
			   
			     
			 var tag=0;
			function submit(){
				
				if(tag==1){
					return;
				}
				
				
				
				if(starNum>0){
				}else{
					  $('#myModal').modal('show')  ;
	        		   $(".modal-body").text("请对支付速度进行评价");
					return;
				}
				if(starNumTwo>0){
				}else{
					  $('#myModal').modal('show')  ;
	        		   $(".modal-body").text("请对收货速度进行评价");
					return;
				}
				if(starNumThd>0){
				}else{
					 $('#myModal').modal('show')  ;
	        		   $(".modal-body").text("请对公正度进行评价");
					return;
				}
				
				
				if(starNum + starNumTwo+starNumThd> 0){
					var evaluateWordIds=$("#word").val();
					if(evaluateWordIds.length <6) {
					     $('#myModal').modal('show')  ;
		        		   $(".modal-body").text("请至少评论6个字");
					     return;
					   }
					if(evaluateWordIds == ""){
						   $('#myModal').modal('show')  ;
		        		   $(".modal-body").text("请输入评价内容");
					}else{
						tag=1;
						$.ajax({
							type: 'POST',
							url: "${ctxFront }/jiu/ajaxEvaluate",
							dataType: "json",
							cache:true,
							async:false,
							data: {uid:"${uid}",orderId:"${orderId}",type:"${type}",starNum:starNum,starNumTwo:starNumTwo,starNumThd:starNumThd,evaluateWordIds:evaluateWordIds},
							success: function (data) {
			                     if(data.msg=='success'){
			                    	 window.location.href="${ctxFront }/jiu/toSeeEvaluate?uid=${uid}&orderId=${orderId}&type=${type}";
			                     }
							}
						});	
						/* $.getJSON("${ctxFront }/jiu/ajaxEvaluate",{uid:"${uid}",orderId:"${orderId}",type:"${type}",starNum:starNum,evaluateWordIds:evaluateWordIds}, function(data){
		                     alert(data.message);
		                     if(data.msg=='success'){
		                    	 window.location.href="${ctxFront }/jiu/toSeeEvaluate?uid=${uid}&orderId=${orderId}&type=${type}";
		                     }
		                });  */
					}
				}else{
					  $('#myModal').modal('show')  ;
	        		   $(".modal-body").text("请对每项都进行评价");
				}
				
				/* $('.selected').each(function(){ 
					evaluateWordIds+=$(this).attr('id')+',';
				});  */
				
				
				
			}
		</script>
	</body>
</html>